<template>
    <div class="loading-review-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>
              <el-input v-model="searchKeyword" placeholder="搜索订单号/托盘码" size="small"
                style="width: 200px; margin-right: 10px" @input="filterTable" />
              <el-button type="primary" icon="Plus" @click="openDialog">新增记录</el-button>
              <el-button icon="Check" @click="markAllReviewed">一键复核</el-button>
              <el-button icon="Download" @click="exportTable">导出</el-button>
            </div>
          </div>
        </template>
  
        <el-table :data="filteredData" border>
          <el-table-column prop="planId" label="计划编号" />
          <el-table-column prop="orderId" label="订单号" width="100px"/>
          <el-table-column prop="productName" label="商品名称" width="100px"/>
          <el-table-column prop="productCode" label="商品编码" width="100px"/>
          <el-table-column prop="sourcePallet" label="原托盘码" width="100px"/>
          <el-table-column prop="targetPallet" label="装车托盘码" width="100px"/>
          <el-table-column prop="locationCode" label="库位编码" width="60px" />
          <el-table-column prop="customerName" label="客户名称" width="100px"/>
          <el-table-column prop="quantity" label="数量"  width="60px"/>
          <el-table-column label="复核状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.reviewed"
                active-text="已复核"
                inactive-text="未复核"
                @change="toggleStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.planId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog v-model="dialogVisible" title="编辑装车记录" width="600px">
        <el-form :model="form" label-width="100px">
          <el-form-item label="计划编号">
            <el-input v-model="form.planId" />
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="form.orderId" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.productName" />
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="form.productCode" />
          </el-form-item>
          <el-form-item label="原托盘码">
            <el-input v-model="form.sourcePallet" />
          </el-form-item>
          <el-form-item label="装车托盘码">
            <el-input v-model="form.targetPallet" />
          </el-form-item>
          <el-form-item label="库位编码">
            <el-input v-model="form.locationCode" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="form.customerName" />
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.quantity" type="number" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const searchKeyword = ref('')
  const dialogVisible = ref(false)
  
  interface LoadingItem {
    planId: string
    orderId: string
    productName: string
    productCode: string
    sourcePallet: string
    targetPallet: string
    locationCode: string
    customerName: string
    quantity: number
    reviewed: boolean
  }
  
  const rawData = ref<LoadingItem[]>([
    {
      planId: 'PL20240501-001', orderId: 'ORD-3136',
      productName: '电动工具', productCode: 'DT-865',
      sourcePallet: 'SP-80707', targetPallet: 'TP-70845',
      locationCode: 'E05', customerName: '宝钢集团',
      quantity: 34, reviewed: false
  },
    {
      planId: 'PL20240501-002', orderId: 'ORD-9111',
      productName: '照明设备', productCode: 'ZM-137',
      sourcePallet: 'SP-30808', targetPallet: 'TP-64475',
      locationCode: 'D04', customerName: '宝钢集团',
      quantity: 37, reviewed: false
  },
    {
      planId: 'PL20240501-003', orderId: 'ORD-2105',
      productName: '建筑钢材', productCode: 'JG-416',
      sourcePallet: 'SP-19765', targetPallet: 'TP-75770',
      locationCode: 'D04', customerName: '盛世五金',
      quantity: 49, reviewed: false
  },
    {
      planId: 'PL20240501-004', orderId: 'ORD-3820',
      productName: '建筑钢材', productCode: 'JG-735',
      sourcePallet: 'SP-57791', targetPallet: 'TP-82171',
      locationCode: 'B02', customerName: '京东物流',
      quantity: 29, reviewed: false
  },
    {
      planId: 'PL20240501-005', orderId: 'ORD-7926',
      productName: '建筑钢材', productCode: 'JG-250',
      sourcePallet: 'SP-84202', targetPallet: 'TP-16361',
      locationCode: 'B02', customerName: '华南商贸',
      quantity: 49, reviewed: false
  },
    {
      planId: 'PL20240501-006', orderId: 'ORD-9899',
      productName: '建筑钢材', productCode: 'JG-260',
      sourcePallet: 'SP-86339', targetPallet: 'TP-98373',
      locationCode: 'C03', customerName: '华南商贸',
      quantity: 42, reviewed: false
  },
    {
      planId: 'PL20240501-007', orderId: 'ORD-5421',
      productName: '电动工具', productCode: 'DT-148',
      sourcePallet: 'SP-11976', targetPallet: 'TP-98441',
      locationCode: 'E05', customerName: '盛世五金',
      quantity: 33, reviewed: true
  },
    {
      planId: 'PL20240501-008', orderId: 'ORD-3649',
      productName: '涂料油漆', productCode: 'TL-810',
      sourcePallet: 'SP-52870', targetPallet: 'TP-52471',
      locationCode: 'D04', customerName: '盛世五金',
      quantity: 27, reviewed: false
  },
    {
      planId: 'PL20240501-009', orderId: 'ORD-8687',
      productName: '建筑钢材', productCode: 'JG-775',
      sourcePallet: 'SP-84804', targetPallet: 'TP-36932',
      locationCode: 'C03', customerName: '华南商贸',
      quantity: 2, reviewed: false
  },
    {
      planId: 'PL20240501-010', orderId: 'ORD-9546',
      productName: '建筑钢材', productCode: 'JG-313',
      sourcePallet: 'SP-16965', targetPallet: 'TP-35529',
      locationCode: 'A01', customerName: '京东物流',
      quantity: 40, reviewed: true
  },
    {
      planId: 'PL20240501-011', orderId: 'ORD-1896',
      productName: '电动工具', productCode: 'DT-781',
      sourcePallet: 'SP-83209', targetPallet: 'TP-72305',
      locationCode: 'A01', customerName: '京东物流',
      quantity: 29, reviewed: true
  },
    {
      planId: 'PL20240501-012', orderId: 'ORD-7865',
      productName: '建筑钢材', productCode: 'JG-177',
      sourcePallet: 'SP-89479', targetPallet: 'TP-46017',
      locationCode: 'A01', customerName: '盛世五金',
      quantity: 16, reviewed: false
  },
    {
      planId: 'PL20240501-013', orderId: 'ORD-5135',
      productName: '涂料油漆', productCode: 'TL-348',
      sourcePallet: 'SP-25573', targetPallet: 'TP-53922',
      locationCode: 'E05', customerName: '京东物流',
      quantity: 43, reviewed: false
  },
    {
      planId: 'PL20240501-014', orderId: 'ORD-8426',
      productName: '涂料油漆', productCode: 'TL-347',
      sourcePallet: 'SP-71165', targetPallet: 'TP-70186',
      locationCode: 'B02', customerName: '盛世五金',
      quantity: 35, reviewed: true
  },
    {
      planId: 'PL20240501-015', orderId: 'ORD-6528',
      productName: '建筑钢材', productCode: 'JG-703',
      sourcePallet: 'SP-72897', targetPallet: 'TP-48242',
      locationCode: 'A01', customerName: '宝钢集团',
      quantity: 28, reviewed: false
  }
  ])
  const filteredData = ref([...rawData.value])
  
  const form = ref<LoadingItem>({
    planId: '', orderId: '', productName: '', productCode: '',
    sourcePallet: '', targetPallet: '', locationCode: '',
    customerName: '', quantity: 0, reviewed: false
  })
  
  function openDialog() {
    form.value = {
      planId: '', orderId: '', productName: '', productCode: '',
      sourcePallet: '', targetPallet: '', locationCode: '',
      customerName: '', quantity: 0, reviewed: false
    }
    dialogVisible.value = true
  }
  
  function editRow(row: LoadingItem) {
    form.value = { ...row }
    dialogVisible.value = true
  }
  
  function saveForm() {
    const index = rawData.value.findIndex(item => item.planId === form.value.planId)
    if (index > -1) {
      rawData.value[index] = { ...form.value }
    } else {
      rawData.value.push({ ...form.value })
    }
    filterTable()
    dialogVisible.value = false
  }
  
  function deleteRow(planId: string) {
    rawData.value = rawData.value.filter(item => item.planId !== planId)
    filterTable()
  }
  
  function toggleStatus(row: LoadingItem) {
    const index = rawData.value.findIndex(item => item.planId === row.planId)
    if (index !== -1) {
      rawData.value[index].reviewed = row.reviewed
      filterTable()
    }
  }
  
  function markAllReviewed() {
    rawData.value.forEach(item => item.reviewed = true)
    filterTable()
  }
  
  function filterTable() {
    const keyword = searchKeyword.value.toLowerCase()
    filteredData.value = rawData.value.filter(item =>
      item.orderId.toLowerCase().includes(keyword) ||
      item.sourcePallet.toLowerCase().includes(keyword) ||
      item.targetPallet.toLowerCase().includes(keyword)
    )
  }
  
  function exportTable() {
    const headers = ['计划编号','订单号','商品名称','商品编码','原托盘码','装车托盘码','库位编码','客户名称','数量','复核状态']
    const keys = ['planId','orderId','productName','productCode','sourcePallet','targetPallet','locationCode','customerName','quantity','reviewed']
    const csv = [
      headers.join(','),
      ...filteredData.value.map(row =>
        keys.map(k => row[k as keyof LoadingItem]).join(',')
      )
    ].join('\n')
  
    const blob = new Blob([csv.replace(/\\n/g, '\n')], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '装车复核数据.csv'
    link.click()
  }
  </script>
  
  <style scoped>
  .loading-review-container {
    padding: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
  